<template>
    <div class="recommend">
        <p class="title">热销推荐</p>
        <router-link tag="div" :to="'/detail/'+item.id" v-for="item of recommendList" :key="item.id" class="list">
            <img :src="item.imgUrl"/>
            <div class="item">
                <h5>{{item.title}}</h5>
                <p>{{item.content}}</p>
                <button>查看详情</button>
            </div>
        </router-link>
    </div>
</template>
<script>
export default {
    name:"HomeRecommend",
    props:{
        recommendList:{
            type:Array
        }
    }

}
</script>
<style lang="scss" scoped>
.recommend{
    background-color: #eee;
}
 .title{
     height: 70px;
     line-height: 70px;
     font-size: 20px;
     margin-left: 15px;
 }
 .list{
     display: flex;
     align-items: center;
     height: 220px;
     background-color: #fff;
     img{
         width: 150px;
         height: 150px;
         margin-left: 20px;
     }
 }
.item{
   margin-left: 15px;
    h5{
      margin-bottom: 3px;
      font-size: 30px;
    }
    p{
        color: #aaa;
        margin-bottom: 3px;
        font-size: 30px;
    }
    button{
         width: 175px;
        height: 60px;
        font-size: 30px;
        color: #ff8300;
        background: #fff;
       border:1px solid #eee;
       border-radius: 15px;
    }
}
</style>
